// pages/song/song.js
import request from '../../../utils/request'
//引入moment
import moment from 'moment'
import Pubsub from 'pubsub-js'
//引入全局的唯一的实例对象
const appInstance = getApp()
Page({
    /**
     * 页面的初始数据
     */
    data: {
        musicId: '', //音乐的Id
        music: {}, //音乐对象数据
        durationTime: '00:00', //歌曲总时间
        isPlay: false, //播放和暂停标识
        musicLink: '', //播放音乐的地址
        currentTime: '00:00', //播放实时时间
        currentWidth: 0, //播放时的进度条
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        //获取音乐的id 
        const musicId = options.songId
        //更新数据
        this.setData({
            musicId
        })
        //调用方法获取音乐的详情信息数据
        this.getMusicData(this.data.musicId)
        //播放、地址。真的要控制音乐播放了
        this.backgroundAudioManager = wx.getBackgroundAudioManager()
        //监听音乐的播放、暂停、停止，需要知道此时的播放状态（影响动画效果--同步效果），需要知道音乐的id（需要知道那一首歌曲是播放的还是暂停的或者是停止的），把音乐播放的id和播放的状态两个数据存储起来（播放页面如果离开了，这个也页面就没有了），退出：这两个数据是不能在这个页面中存储（缓存、全局数据缓存）
        //先判断当前的音乐播放状态和此时音乐的id和当前界面中音乐的id是否一致
        if (appInstance.globalData.isPlayState && appInstance.globalData.musicId == musicId) {
            this.setData({
                isPlay: true
            })
        }
        //监听背景音乐播放事件
        this.backgroundAudioManager.onPlay(() => {
            appInstance.globalData.musicId = this.data.musicId
            this.changeMusicState(true)
        })
        //监听背景音暂停事件
        this.backgroundAudioManager.onPause(() => {
            this.changeMusicState(false)

        })
        //监听背景音乐停止事件
        this.backgroundAudioManager.onStop(() => {
            this.changeMusicState(false)
        })
        //监听音乐播放进度实时事件
        this.backgroundAudioManager.onTimeUpdate(() => {
            //格式化当前播放时间
            let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss')
            let currentWidth = this.backgroundAudioManager.currentTime * 450 / this.backgroundAudioManager.duration
            if (appInstance.globalData.isPlayState && appInstance.globalData.musicId !== musicId) {
                return
            }
            //更新时间
            this.setData({
                currentTime, // 实时的播放时间
                currentWidth // 实时的进度
            })
            //
        })
        //监听音乐自然播放结束事件
        this.backgroundAudioManager.onEnded(() => {
            //歌曲结束
            this.setData({
                currentTime: '00:00',
                currentWidth: 0
            })
            //自动播放下一曲
            this.handlerSwitch({
                currentTarget: {
                    id: 'next'
                }
            })
        })
    },
    //抽取个方法存储音乐播放状态
    changeMusicState(isPlay) {
        appInstance.globalData.isPlayState = isPlay
        this.setData({
            isPlay: isPlay
        })
    },
    //获取音乐的详情信息数据
    async getMusicData(ids) {
        const result = await request('/song/detail', {
            ids
        })
        //获取总时间
        const durationTime = moment(result.songs[0].dt).format('mm:ss')
        //保存数据
        this.setData({
            music: result.songs[0],
            durationTime
        })
        //设置标题
        wx.setNavigationBarTitle({
            title: this.data.music.name
        })
    },
    //控制播放和暂停
    handlerPlay() {
        const isPlay = !this.data.isPlay
        //更新数据
        this.setData({
            isPlay
        })
        const {
            musicId,
            musicLink
        } = this.data
        //控制音乐的播放和暂停
        this.musicControl(isPlay, musicId, musicLink)
    },
    //控制音乐的播放和暂停
    async musicControl(isPlay, musicId, musicLink) {
        //判断播放状态
        if (!isPlay) {
            //暂停播放音乐
            this.backgroundAudioManager.pause()
            return
        }
        //此时要播放，判断地址是否存在
        if (!musicLink) {
            //根据歌曲的播放Id获取播放地址
            const musicUrlData = await request('/song/url', {
                id: musicId
            })
            musicLink = musicUrlData.data[0].url
            //更新数据
            this.setData({
                musicLink
            })
        }
        //再一次判断地址是否存在---有的musicLink是空的，这个Bug解决一下
        if (!musicLink) {
            wx.showToast({
                title: 'ViP歌曲，请成为会员',
                icon: 'none'
            })
            //仅仅是改变动画效果没有了
            this.setData({
                isPlay: false
            })
            return
        }
        //设置地址
        this.backgroundAudioManager.src = musicLink
        //设置标题
        this.backgroundAudioManager.title = this.data.music.name
    },
    //上一曲和下一曲
    handlerSwitch(event) {
        //订阅消息
        Pubsub.subscribe('musicId', (msg, musicId) => {
            //更新音乐id
            this.setData({
                //自动播放，下一首的音乐id类型是number,  因此需要转换成String类型的
                musicId: musicId.toString()
            })
            //根据id获得音乐对象
            this.getMusicData(musicId)
            //播放音乐
            this.musicControl(true, musicId)
            //清理消息
            Pubsub.unsubscribe('musicId')
        })
        //获取上一曲或者下一曲的标识
        const type = event.currentTarget.id
        //发布消息
        Pubsub.publish('switchType', type)
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})